<template>
    <div  >
        <swiper :autoplay="{
            delay: 2500,
            disableOnInteraction: false,
        }" loop :modules="swiperModules" :pagination="true">
            <swiper-slide v-for="(item, index) in thumbs">
                <div class="bg-center bg-no-repeat bg-cover h-80" :style="`background-image:url(${item})`">
                </div>
            </swiper-slide>
        </swiper>
    </div>
</template>
    
<script setup lang='ts'>

import thumb from '~/assets/shop/goods-detail/gd1.png'
import 'swiper/css/pagination';
import 'swiper/css';
import { Autoplay, Pagination } from "swiper";
import { Swiper, SwiperSlide } from 'swiper/vue';

const swiperModules = [
    Autoplay,
    Pagination
];
const thumbs = [thumb, thumb, thumb];

</script>
    
<style lang="scss" scoped>
:deep(.swiper-pagination-bullet) {
    @apply transition-all;
}

:deep(.swiper-pagination-bullet-active) {
    @apply bg-black/30 px-2 rounded-md;
}
</style>